import React,{Component} from 'react'
import { connect} from 'react-redux';
import { Empty, List, Card, InputNumber, Modal, Button} from 'antd'
import style from './style.less'
import { ServerIP, IconFont } from '@utils/request';
import image1 from '@assets/menu/xiaolongxia.jpg'
import * as actions from '../MyBoss/MyMenu/store/action';
import QRCode from 'qrcode.react';

class MyClientOrder extends Component {
    constructor(props){
        super(props)
        this.state={
           numbers:[],
           allMenuList: [],
           Visible: false,
        }
    }
    componentDidMount(){
        this.props.getAllMenuRequest()
    }
    componentDidUpdate(nextProps) {
        if (this.props.getAllMenu !== nextProps.getAllMenu) {
            this.setState({
                allMenuList: (this.props.getAllMenu || "").filter(obj => { return obj.isSticky })
            })
        }

    }
    //全部数据
    card_map = data => {
        return (
            <Card
                bordered={false}
                // hoverable={true}
            >
                <div className={style.div_card}>
                    <div className={style.div_photo}>
                        {
                            data.photoPath == '' || null || undefined ? (
                                <img src={image1} alt="" />

                            ) : (
                                <img src={ServerIP+data.photoPath} alt="" />                             )
                        }   
                    </div>
                    <div className={style.div_information}>
                        <div className={style.div_information_name}>
                           <div>
                                <span>菜品:</span>
                                <span style={{ color:'#606266'}}>{data.menuName}</span>
                           </div>
                            <div>
                                <span>单价:</span>
                                <span style={{ color: '#606266' }}>{data != undefined ? data.price+"元/份": "" }</span>
                            </div>
                        </div>
                        <div className={style.div_information_name}>
                            <div>
                                <span>数量:</span>
                                <InputNumber min={1} max={10} defaultValue={1} onChange={(value) => { this.setState({ numbers: value }) }} />
                            </div>
                            <div>
                                <span style={{ color: 'orange', fontSize: "12px"}}>
                                    {data != undefined ? (data.isRecommend === true ? <span>
                                        <IconFont type="iconremen" style={{ fontSize: "18px" }} />
                                        {"热售中..."}
                                        </span>:""):""
                                    }
                                </span>
                            </div>
                        </div>
                        <div className={style.div_information_button}>
                            <Button
                                size="small"
                                type='primary'
                                ghost
                                onClick={() => this.alipayFinish(data)}
                            >
                               提交订单
                            </Button>
                        </div>
                        
                        
                    </div>
                </div>
            </Card>
        )
    }
    render(){
        const { allMenuList}=this.state;
        return(
           <div className={style.div_body}>
                {
                    this.props.getAllMenu !=undefined||[] ? (
                        <List
                            grid={{ gutter: 16, column: 4 }}
                            dataSource={allMenuList}
                            renderItem={item => (
                                <List.Item>
                                    {this.card_map(item)}
                                </List.Item>
                            )}
                        /> 
                       
                    ):(
                        <Empty />
                    )
                        
                    
                }
                <Modal
                    title="扫码支付"
                    visible={this.state.Visible}
                    onCancel={() => { this.setState({ Visible: false }) }}
                    footer={null}
                    destroyOnClose
                    getContainer={false}
                    width={300}
                    style={{ textAlign: "center" }}
                >
                    <QRCode
                        value={this.props.qrcode}
                        size={200} //二维码的宽高尺寸
                        fgColor="#000000"  //二维码的颜色
                    />,
                </Modal>
           </div>
        );
    }
    alipayFinish = (data) => {
        let obj = {
            id: data.id,
            unitPrice: data.price,
            catNumber: 1
        }
        this.props.alipayRequest(obj)
        this.timer = setInterval(() => {
            const obj1 = {
                out_trade_no: this.props.out_trade_no
            }
            if (this.state.Visible===true){
                this.props.queryRequest(obj1)
            }
        }, 6000);

        this.setState({
            Visible: true,
        })

    }
}
const mapStateToProps = (state) => ({
    // 获取所菜单信息
    getAllMenu: state.menuConfig.getAllMenu,
    qrcode: state.menuConfig.qrcode,
    out_trade_no: state.menuConfig.out_trade_no,
    queryStatus: state.menuConfig.queryStatus,
})

const mapDispatchToProps = dispatch => ({
    // 获取所有数据
    getAllMenuRequest() {
        dispatch(actions.getAllMenuRequest())
    },
    //支付
    alipayRequest(value) {
        dispatch(actions.alipayRequest(value))
    },
    //支付
    queryRequest(value) {
        dispatch(actions.queryRequest(value))
    },
})
export default connect(mapStateToProps, mapDispatchToProps)(MyClientOrder);
